<template>
  <view class="content">
    <view class="info" v-if="detail">
      <img  :src="detail.images[0]" />
      <view class="info-item">
        <view class="title"> {{detail.title}} </view>
        <view class="address">
          <text>规格：{{detail.sku}} </text>
          <text class="add">收货地：{{detail.address}} </text>
        </view>
      </view>
    </view>

    <view class="form">
      <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
      >
        <u-form-item
          required="true"
          label="我的报价"
          borderBottom
          ref="item1"
        >
          <view class="flex">
            <u--input
              v-model="price"
              disabledColor="#ffffff"
              placeholder="输入供应价格"
              border="none"
            ></u--input>
            <u-tag
              style="display: inline-block"
              text="吨"
              bg-color="#F4F4F4"
              shape="circle"
              color="#131313"
              border-color="#F4F4F4"
            ></u-tag>
          </view>
        </u-form-item>
        <u-form-item
          required="true"
          label="供货地区"
          borderBottom
          ref="item1"
        >
		<u--input
		  v-model="address"
		  disabledColor="#ffffff"
		  placeholder="请输入省市区"
		  border="none"
		></u--input>
          <!-- <u--input
            v-model="model1.userInfo.sex"
            disabled
            disabledColor="#ffffff"
            placeholder="省/市/区"
            border="none"
          ></u--input> -->
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="备注说明"
          borderBottom
          ref="item1"
        >
          <u--textarea
            v-model="mark"
            placeholder="填写备注说明"
          ></u--textarea>
        </u-form-item>
      </u--form>
    </view>

    <view class="form">
      <u--form
        :model="model1"
        :rules="rules"
        ref="uForm"
        labelPosition="top"
        labelWidth="200"
      >
        <u-form-item
          required="true"
          label="上传图片、视频"
          prop="userInfo.sex"
          borderBottom
          ref="item1"
        >
          <view class="upload">
            <u-upload
              :fileList="fileList1"
              name="1"
              multiple
              :maxCount="10"
            ></u-upload>
            <text>（图片建议大小750px*750px，视频建议时长不超过10s）</text>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="footer">
      <u-button
        color="linear-gradient(90deg, #0096FF 0%, #003DB1 100%)"
        class="hande"
		@click="submit"
        >确认报价</u-button
      >
    </view>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      fileList1: [],
	  price:"",
	  address:"",
	  mark:"",
	  detail:{},
      model1: {
        userInfo: {
          name: "uView UI",
          sex: "",
        },
      },
      rules: {
        "userInfo.name": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.sex": {
          type: "string",
          max: 1,
          required: true,
          message: "请选择男或女",
          trigger: ["blur", "change"],
        },
      },
	  id:0
    };
  },
  onLoad(e){
  	if(e.id){
		this.id = e.id
	}
  this.getdetail()
  },
  methods: {
	  submit(){
		if(this.price == ""){
			this.$.ti_shi("请输入报价");return;
		}
		if(this.address == ""){
			this.$.ti_shi("请输入供货地址");return;
		}
		if(this.mark == ""){
			this.$.ti_shi("请输入备注说明");return;
		}
		var that = this
		this.$.ajax(1,'POST','/user/setoffer',{
			remark:this.mark,
			price:this.price,
			address:this.address,
			goods_id:this.id
		},(res)=>{
			this.$.ti_shi(res.msg)
			if(res.code == 1){
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
				
			}
		})  
		  
	  },
  		getdetail(){
  			var that = this
  			this.$.ajax(1,'POST','/index/getpurchasedetail',{
  				id:this.id
  			},(res)=>{
  				that.detail = res.data.detail
  			})
  		},
	},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.content {
  .info {
    display: flex;
    align-items: center;
    background: #fff;
    gap: 20rpx;
    margin: 20rpx 0;
    padding: 20rpx;

    img {
      width: 46px;
      height: 46px;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      color: #666666;
      font-size: 14px;

      .address {
        display: flex;

        text {
          padding: 0 5px;
        }

        .add {
          border-left: 1px solid #aaaaaa;
        }
      }

      .title {
        font-size: 16px;
        color: #131313;
      }
    }
  }

  .form {
    margin: 20rpx 20rpx 20rpx;
    background-color: #fff;
    border-radius: 12px;
    padding: 20rpx;
    .upload {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      color: #999999;
      font-size: 12px;
      font-weight: 400;
    }
  }

  .footer {
    padding: 20rpx;
    position: fixed;
    bottom: 0;
    width: 100%;

    .hande {
      color: #ffffff;
      border-radius: 6px;
      font-size: 13px;
    }
  }
}
</style>

